什麼是MERN

由於我會使用到Mongo DB以及Node.js的技術來做我的專案，因此我也會順變介紹MERN這個詞

• MongoDB（數據庫）：MongoDB是一個NoSQL數據庫，以一種靈活的JSON-like格式稱為BSON（Binary JSON）存儲數據。它以其可擴展性和處理大量非結構化或半結構化數據的能力而著稱。MongoDB通常用作MERN應用程序的後端數據庫。

• Express.js（後端伺服器）：Express.js是用於Node.js的Web應用程序框架。Express.js通過提供一組中間件和處理HTTP請求和響應的工具，簡化了構建Web應用程序和API的過程。Express.js通常用於MERN應用程序的後端伺服器。

• React（前端用戶界面）：React是一個用於構建用戶界面的JavaScript庫。React是由Meta維護，以其基於組件的架構而著稱。React允許開發人員創建可重用的UI組件，並根據數據更改高效地更新用戶界面。React通常用於構建MERN應用程序的前端。

• Node.js（伺服器環境）：Node.js是一個運行時環境，允許開發人員在伺服器端運行JavaScript。Node.js基於V8 JavaScript引擎構建，提供了非阻塞、事件驅動的架構。Node.js通常用於構建伺服器邏輯並處理MERN應用程序的後端操作。

以下是應用MERN技術顯示出Hello,World!

建立MERN專案目錄

mkdir mern-hello-world
cd mern-hello-world
mkdir client server

切換到前端React

cd client
npx create-react-app .

在切到後端Node.js

cd ../server
npm init -y

安裝必要的依賴項

npm install express cors

Javascript的撰寫(後端)

const express = require("express");
const cors = require("cors");

const app = express();
const port = process.env.PORT || 5000;

app.use(cors());

app.get("/", (req, res) => {
  res.json({ message: "Hello World" });
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

前端就能顯示出Hello,World!了

import React, { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    axios.get("/").then((response) => {
      setMessage(response.data.message);
    });
  }, []);

  return (
    <div>
      <h1>MERN Hello World</h1>
      <p>{message}</p>
    </div>
  );
}

export default App;

記得要啟動應用程序

npm start

node index.js